<template>
  <VPage>
    <el-tabs v-model="activeName" class="h-full info-shop">
      <!-- <el-tab-pane v-for="(d, i) in tabs.filter(d => $auth(`/base/shop/${d.name}/list`))" :key="i" :label="d.label" :name="d.name"> -->
      <el-tab-pane v-for="(d, i) in tabs" :key="i" :label="d.label" :name="d.name">
        <component :is="d.com" :ref="d.name" v-bind="d.attrs" v-if="loads[d.name]" />
      </el-tab-pane>
    </el-tabs>
  </VPage>
</template>
  
<script setup lang="jsx">
import { $auth } from '@/utils'
import {reactive, ref} from "vue"
import api from './api'

const componentField = import.meta.globEager('./components/Shops/**/index.vue')
const config = ref({})
for (const [key,comp] of Object.entries(componentField)) {
  const name = key.replace('./components/Shops/', '').replace('/index.vue', '')
  config[name] = comp.default
}

const activeName = ref('amazon')
const loads = reactive({ amazon: true })

const tabs = ref([])
api.platforms().then(res => {
  tabs.value = res.data.map(d => {
    const {label, value, id} = d
    return {name: value, label, com: config[value] || config['others'], attrs: {type: value, platform_id: id, platform_name: label}}
  })
})


const init = () => {
  const { platform_name } = JSON.parse(sessionStorage.getItem('_setForm')) || {}
  if (platform_name) {
    activeName.value = platform_name
  }
}

init()
onActivated(() => {
  init()
})

watch(
  () => activeName.value,
  (val) => {
    if (loads[val]) return
    loads[val] = true
  }, {
  immediate: true
})
</script>

<style lang="scss">
.info-shop {
  .el-tabs__header {
    margin-bottom: 0;
    padding: 0 10px;
  }

  .el-tabs__content {
    height: calc(100% - 40px);
  }

  .el-tab-pane {
    height: 100%;
  }
}
</style>